<!doctype html>
<html class="no-js" lang="">

<head>
  <title></title>
  <meta charset="utf-8">
  <script type="text/javascript" src="/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, gfxRenderer:'svg,vml' "></script>
</head>

<body>
<script type="text/javascript" >

  // surface 绘图画面    shape 图形   group组

  // 开发人员只需首先创建一个绘图画面，而 后调用 GFX 中提供了图形创建 API，即可完成相应图形的绘制

  // 例如图像的边框以及颜色填充，可以通过 Stroke 和 Fill 属性进行设定

  // 而图形之间的叠放层次则可以使用 z-order 来控制，z-index 值最大的图形位于整个画面的最上方

  //1. 加载 gfx 包
  dojo.require("dojox.gfx");

  dojo.addOnLoad(function(){
    //2. 获取 DOM 节点，用于创建 surface
    gTestContainer = dojo.byId('testcontainer');

    //3. 创建 300*300 的绘图画面
    var surface = dojox.gfx.createSurface(gTestContainer, 300, 300);

    //4. 在画面上绘制直线，并设置相应填充色、线条以及位移等属性
    surface.whenLoaded(dojo.hitch(this, function() {
      var line = surface.createLine({x1: 20, y1: 20, x2: 100, y2: 120})
              .setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 5}); }));
  });
</script>
  <div id="testcontainer"></div>
</body>

</html>
